<template>
    <view
        class="mask"
        :class="mask == 'true' || mask == true ? 'mask-show' : ''"
        @click="Mclose"
        v-if="show"
        @touchmove.stop.prevent="preventTouchMove"
    >
        <!-- 加载动画开始 -->
        <!-- loading1~loading30挑选任意一个替换下方html 且替换对应css -->
        <view class="loader loading11">
            <view class="line line1"></view>
            <view class="line line2"></view>
            <view class="line line3"></view>
        </view>
        <!-- 加载动画结束 -->
        <view class="title">{{ text }}</view>
        <view v-if="showDjs" class="title" style="padding-top: 10px;">
            {{ num >= 3 ? '通讯中...若出现异常，请退出重试(' + (countNum - num) + 's)' : '' }}
        </view>
    </view>
    <!-- 遮罩层-->
</template>

<script scoped="true">
export default {
    name: 'w-loading',
    props: {
        text: String,
        mask: Boolean | String,
        click: Boolean | String,
        showDjs: {
            type: Boolean | String,
            default: true
        },
        countNum: {
            type: Number,
            default: 30
        }
    },
    data() {
        return {
            show: false,
            timer: null,
            num: 0
        };
    },
    methods: {
        preventTouchMove() {
            return;
        },
        Mclose() {
            if (this.click == 'true' || this.click == true) {
                this.show = false;
            }
        },
        open() {
            let _this = this;
            _this.show = true;
            clearInterval(_this.timer);
            // 超时1分钟还没关闭的，自动关闭loading
            _this.timer = setInterval(() => {
                if (_this.num >= _this.countNum && _this.show) {
                    _this.num = 0;
                    _this.show = false;
                    clearInterval(_this.timer);
                    return false;
                }
                _this.num++;
            }, 1000);
        },
        close() {
            this.show = false;
            this.num = 0;
            clearInterval(this.timer);
        }
    }
};
</script>

<style>
.mask {
    /* pointer-events: none; */
    position: fixed;
    z-index: 199907041231;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.mask.mask-show {
    background: rgba(7, 17, 27, 0.9);
}
.title {
    color: #fff;
    font-size: 28upx;
}

/*============================================================= loading加载动画的css */
.loader {
    position: relative;
    width: 60upx;
    height: 60upx;
    border-radius: 50%;
    margin: 75upx;
    display: inline-block;
    vertical-align: middle;
}

.loading11 .line {
    width: 8upx;
    position: absolute;
    border-radius: 5upx;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce));
    background: -webkit-linear-gradient(top, #1ee95d, #5714ce);
    background: linear-gradient(to bottom, #1ee95d, #5714ce);
}
.loading11 .line1 {
    left: 0;
    -webkit-animation: line-grow 0.5s ease alternate infinite;
    animation: line-grow 0.5s ease alternate infinite;
}
.loading11 .line2 {
    left: 20upx;
    -webkit-animation: line-grow 0.5s 0.2s ease alternate infinite;
    animation: line-grow 0.5s 0.2s ease alternate infinite;
}
.loading11 .line3 {
    left: 40upx;
    -webkit-animation: line-grow 0.5s 0.4s ease alternate infinite;
    animation: line-grow 0.5s 0.4s ease alternate infinite;
}
@-webkit-keyframes line-grow {
    0% {
        height: 0;
    }
    100% {
        height: 75%;
    }
}
@keyframes line-grow {
    0% {
        height: 0;
    }
    100% {
        height: 75%;
    }
}
</style>
